<template>
    <Myhead :title="title"></Myhead>

    <div class="my">
        <div class="myHead">
            <div class="myHeadLeft">
                <span v-show="flat" class="text">请先登录</span>
                <img :src="loginObj.user_img" ref="img" alt="" />
                <input class="hideInput" type="file" ref="file" @change="uploadFunc" />
            </div>
            <div class="myHeadRight">
                <h3 v-if="flat">请先登录</h3>
                <h3 v-else>{{ loginObj.user_nick_name }}</h3>
                <span>圣所的地方</span>
                <div v-if="!flat" class="signature">{{ loginObj.user_signature || "天青色等烟雨" }}</div>
                <van-button @click="pathGo" size="small" v-if="flat" type="danger">去登录</van-button>
            </div>
        </div>
        <div class="mytab">
            <div class="mytabItme" @click="goRecord(userComList, 'userComList')">
                <h3 v-if="!flat">{{ userComList.length }}</h3>
                <h3 v-else>无</h3>
                <span>评论</span>
            </div>
            <div class="mytabItme" @click="goRecord(userWebList, 'userWebList')">
                <h3 v-if="!flat">{{ userWebList.length }}</h3>
                <h3 v-else>无</h3>

                <span>浏览</span>
            </div>
            <div class="mytabItme" @click="goRecord(userLikeList, 'userLikeList')">
                <h3 v-if="!flat">{{ userLikeList.length }}</h3>
                <h3 v-else>无</h3>
                <span>点赞</span>
            </div>
        </div>
        <van-cell-group>
            <van-cell to="/attention" title="关注"><van-icon name="arrow" /></van-cell>

            <van-cell title="个人信息" @click="jumpGo"><van-icon name="arrow" /></van-cell>
            <van-cell v-show="!flat" title="退出登录" @click="showPopup"><van-icon name="arrow" /></van-cell>
            <!-- <van-cell @click="showHitokoto()" title="随机一句"><van-icon name="arrow" /></van-cell> -->
        </van-cell-group>
        <!-- <van-popup v-model:show="show" v-if="!flat" closeable position="bottom" :style="{ height: '20%' }" />
        <van-popup v-model:show="show" v-if="!flat" closeable close-icon="close" position="bottom" :style="{ height: '20%' }" />
        <van-popup v-model:show="show" v-if="!flat" class="exitPopup" closeable close-icon-position="top-right" position="bottom" :style="{ height: '20%' }">
            <div class="exitBtn">
                <van-button @click="pathGo" type="danger" size="large">退出登录</van-button>
            </div>
        </van-popup> -->
        <van-action-sheet v-model:show="show" :actions="actions" @select="pathGo" />

        <van-dialog v-model:show="show2" :title="hitokotoValue" show-cancel-button> </van-dialog>
    </div>
</template>
<script setup>
import { upload_img, save_img, delete_img, userCom, userLike, userWeb, hitokoto } from "@/request/index";
import { Cell, CellGroup, Button, Popup, Dialog, ActionSheet, showToast } from "vant";
import { ref, defineComponent, computed, onMounted, onUpdated } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import Myhead from "../../components/Myhead.vue";
import "vant/es/toast/style";
defineComponent({
    Myhead,
});
const show2 = ref(false);
let store = useStore();
let router = useRouter();
let flat = ref(true);
let loginObj = ref({});
let img = ref(null);
let userComList = ref([]);
let userLikeList = ref([]);
let userWebList = ref([]);
let hitokotoValue = ref("");
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const actions = [{ name: "退出登录" }];
// const onSelect = (item) => {
//     // 默认情况下点击选项时不会自动收起
//     // 可以通过 close-on-click-action 属性开启自动收起
//     show.value = false;
//     showToast(item.name);
// };
loginObj.value = computed(() => {
    return store.state.myRoute.loginObj;
});
const uploadFunc = (event) => {
    let inpElement = event.target;
    let file = inpElement.files[0];
    let formData = new FormData();
    formData.append("photo", file);
    let token = localStorage.getItem("autoToken");
    console.log(token, 111);
    if (token) {
        upload_img(formData, { headers: { token } }).then((content) => {
            if (content.code == 200) {
                img.value.src = content.picUrl;
                if (confirm("是否更换头像?")) {
                    save_img({ user_id: loginObj.value.user_id, user_img: content.picUrl }).then((data) => {
                        console.log(data);
                    });
                    alert("更换成功");
                    let oldImg = loginObj.value.user_img;
                    loginObj.value.user_img = content.picUrl;

                    delete_img({ user_img: oldImg }).then((con) => {
                        console.log(con, 555);
                    });
                } else {
                    img.value.src = loginObj.value.user_img;

                    alert("取消更换");
                }
            } else {
                alert(content.msg);
                return false;
            }
        });
    } else {
        alert("请先登录");
    }
};
onMounted(() => {
    if (store.state.myRoute.loginObj.user_nick_name != undefined) {
        loginObj.value = store.state.myRoute.loginObj;
        flat.value = false;
    } else {
        flat.value = true;
    }
    let user_id = localStorage.getItem("token");
    userCom({ user_id }).then((data) => {
        userComList.value = data.row;
        console.log(data.row, "data");
        // console.log(data.row[0]["count(*)"], 555);
    });
    userLike({ user_id }).then((data) => {
        userLikeList.value = data.row;
    });
    userWeb({ user_id }).then((data) => {
        userWebList.value = data.row;
    });
    // type=social
    hitokoto().then((data) => {
        console.log(data);
        hitokotoValue.value = data.data;
    });
});

const pathGo = (item) => {
    console.log(flat.value);
    if (flat.value == false) {
        if (confirm("确定退出登录?")) {
            localStorage.clear();
            flat.value = true;
            loginObj.value = {};
            store.commit("myRoute/setLoginObj", "");
            show.value = false;
            showToast(item.name);
        } else {
            return;
        }
    } else {
        router.push("/login");
    }
};
const goRecord = (x, y) => {
    console.log(x);
    router.push({ path: "/record", query: { record: JSON.stringify(x), kind: y } });
};
const jumpGo = () => {
    router.push("/edit");
    console.log("ddddd");
};
const showHitokoto = () => {
    show2.value = true;
    hitokoto().then((data) => {
        console.log(data);
        hitokotoValue.value = "     " + data.data + "     ";
    });
};
// console.log(loginObj);
// console.log(store.state.myRoute.loginObj, 546);
let title = ref("我的");
</script>
<style lang="scss">
.text {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translateY(-50%);
    // transform: translateX(-50%);
    color: #ccc;
}
.exitBtn {
    padding: 60px 10px 0;
}
.exitPopup {
    border-radius: 10px 10px 0 0;
    .van-button--danger {
        background-color: #576574;
        border-color: #576574;
    }
}
.van-dialog__confirm,
.van-dialog__confirm:active {
    color: #f15a24;
}
.my {
    padding: 10px;

    .myHead {
        height: 3.3067rem;
        display: flex;
        .myHeadLeft {
            height: 100%;
            width: 3.3067rem;
            border: 1px solid #ccc;
            box-sizing: border-box;
            border-radius: 18px;

            overflow: hidden;
            position: relative;
            img {
                height: 100%;
                object-fit: cover;
                background: url(@/static/images/jjz.webp) no-repeat center center;
                background-size: cover;
            }
        }
        .myHeadRight {
            height: 100%;
            width: 5rem;
            margin-left: 0.2667rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            > .van-button {
                width: 100px;
                background-color: #576574;
                border-color: #576574;
            }
            > h3 {
                font-size: 0.5333rem;
                margin-bottom: 0.16rem;
            }
            > span {
                font-size: 0.32rem;
                margin-bottom: 0.32rem;
            }
            > .signature {
                width: 3rem;
                height: 0.8rem;
                font-size: 0.3733rem;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                margin-top: 0.2667rem;
            }
        }
    }
    .mytab {
        margin-top: 0.2667rem;
        background-color: #576574;
        border-radius: 10px;
        height: 1.6533rem;
        display: flex;
        .mytabItme {
            height: 1.3333rem;
            width: 33.333%;
            margin-top: 0.16rem;
            text-align: center;
            color: white;
            &:nth-child(2) {
                border-left: 0.0267rem solid #ccc;
                border-right: 0.0267rem solid #ccc;
            }
            h3 {
                line-height: 0.8rem;
            }
            span {
                font-size: 0.3733rem;
            }
        }
    }
    .van-cell-group {
        margin-top: 0.2667rem;
    }
    .hideInput {
        position: absolute;
        top: 40%;
        left: 17%;
        opacity: 0;
    }
}
</style>
